<template>
  <div>
    <p>插槽</p>
    <!-- slot的作用是一个特殊的容器，用来展示组件标签中间的内容 -->
    <!-- 插槽和父传子的区别：父传子只能传数据；插槽还可以传dom结构 -->
    <!-- 插槽的分类 -->
    <p>1.匿名插槽：没有name属性，无家可归的收容所</p>
    <p>2.具名插槽:各回各家，各找各妈</p>
    <p>3.作用域插槽:既可以传dom，还可以传数据</p>
    <slot name="top"></slot>
    <slot name="mid"></slot>
    <hr>
    <slot v-for="item in list" :item="item"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        'html', 'css', 'js'
      ]
    }
  },
}
</script>

<style>

</style>